INTRODUCTION
As a contributor to the design system, I’ve had the opportunity to design and document a number of core components, apply the components to design pages, and help bridge collaboration between designers and developers. TEAM
3 designers (including me!)4 front-end developers
WHAT I CONTRIBUTED IN
Building & documenting componentsDesign screen rebuilds
Token refinement
1:1 Stakeholder interviews
RESULTS
Figma component libraryRebuilt Orderly screens
Design system documentation
BACKGROUND
Nexus Design SystemPROJECT OBJECTIVE
Build the foundations and components in the design system. As well as, rebuild screens in DeLorean using Orderly branding with the new and improved components.OBJECTIVE BREAKDOWN
The path from building blocks to full screens.KEY OUTPUT #1
🧱 Components from scratch.Familiarising with the component build workflow on Figma. A lot of self learning with tutorials, and asking for help from designers and developers.
KEY OUTPUT #2
🖥️ Application of components to design screens and Figma documentation.Component application to new Orderly brand screens. Also, auditing the components to check for any existing design limits.
KEY OUTPUT #3
🧠 An understanding from existing and adopting design system users.Took the initiative to run internal research (8x 1 hour 1:1 user interviews) to uncover common pain points contributing to the design system.
COMPONENT BUILDING IN FIGMA
Thinking in systems, not screens. Shifting mindset from designing individual screens to designing reusable building blocks. Learning Figma skills from component properties to making design tokens. Through this process, I realised how comprehensive design systems are and how intricate each component can be. Learning how design is translated to code was key.SYNTHESIS
Key considerations when making the components
Using design tokens for colour, type, spacing, and radius, and getting clarification if a new token is to be made. This is to ensure consistency and easy system-wide updates. .
Content stress testing.
When components have variations that include text, pushing components with long text, short text, and edge cases to reveal layout errors early.
Discipline with component properties
To keep components flexible but controlled for designers’ use.
PROJECT FACT
Every component is designed to meet at least Level AA of the WCAG 2.0 standards.DOCUMENTATION AND DESIGN APPLICATION
Who’s reading the documentation and what do they need?There are two primary users of the design system. Figma documentation helps designers reuse the components to fit depending on the product they’re designing for. For front-end developers, they are used as a guide for building the base-component and as documentation in Storybook. Constant collaboration is key in ensuring they work for both.SYNTHESIS
Key considerations when applying components to design screens and making documentation.
Applying the components to the updated design screens. Having layed it out test that the components work, and don’t break when reused
Living documentation.
Treating documentation as something that evolves alongside the product and the design system itself, not as a final deliverable.
Designing documentation for multiple audiences.
Writing documentation that supports designers using the components, developers building them, and future contributors extending the system.
IMPACT #1
📒 ConsistencyFigz design system helps provides flexibilty, consistency and accessibility compliance across all PartsTrader products. As well as an opportunity to tidy up bloated code bases into a single, shared code base.
IMPACT #2
⚙️ Efficiency.Reduced development time and costs by utilising reusable components and documentation for quicker iteration and delivery of new features and services.
REFLECTION
💡 Working hand-in-hand with designers and developers.Collaborating across disciplines highlighted how early conversations shape better outcomes. Developers shared practical insights about design scalability, while designers demonstrated efficient ways to approach component building. From both, I learned the value of clear communication and consistent collaboration.
REFLECTION
🌱 Design system process.Over time, I came to see the design system as a living entity. Something that grows, adapts, and responds to the needs of the team and the project over time. It required continuous refinement and prioritising what’s best served the end user. This meant remaining flexible and evolving the process when needed.